<template>
  <div>
    <a-modal
      :title="Title"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      centered
    >
    <a-form :form="ModelForm" ref="ModelForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" >
      <a-form-item label="name" prop="name">
        <a-input placeholder="请输入" v-model="ModelForm.name"></a-input>
      </a-form-item>
      <a-form-item label="age" prop="age">
        <a-input placeholder="请输入" v-model="ModelForm.age"></a-input>
      </a-form-item>
      <a-form-item label="address" prop="address">
        <a-input placeholder="请输入" v-model="ModelForm.address"></a-input>
      </a-form-item>
      <a-form-item label="hobby" prop="hobby">
        <a-select v-model="ModelForm.hobbyName">
          <a-select-option v-for="item in hobbyList" :key="item.key" :value="item.key">{{ item.hobbyName }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    </a-modal>
  </div>
  
</template>

<script>
export default {
name: 'ModelPage',
props:{
  visible:Boolean,
  Title:String,
  rowData:Object
},
data(){
  return{
    ModelForm:{},
    hobbyList:[
      {
        key:1,
        hobbyName:'唱'
      },
      {
        key:2,
        hobbyName:'跳'
      },
      {
        key:3,
        hobbyName:'rap'
      },
      {
        key:4,
        hobbyName:'篮球'
      }
    ]
  }
},
methods:{
  handleOk(){
    console.log(this.rowData)
  },
  handleCancel(){
    //  this.visible = false
   this.$emit('closeModel')
  }
},
watch:{
  'rowData':{
    handler(newValue){
      console.log(newValue, '4444444444444444444')
      this.ModelForm = newValue
    },
    deep: true,
        immediate: true
  }
}
}
</script>

<style>

</style>